<template>
  <div class="main">
    <div class="title">
      Virus - Host
      <div class="subTitle">
        Experimentally-validated interactions between virus sRNA and host RNA or proteins.
      </div>
    </div>

    <div class="rna-warp">
      <div class="item" v-for="(item, idx) in list" :key="idx" >
        <div class="imgWarp">
          <div style="width: 130px;height: 130px">
            <img :src="item.log" @click="itemClick(item, 'experiment')"/>
          </div>

        </div>
        <div class="oblq">{{item.host}}</div>
      </div>
    </div>
  </div>
</template>

<script>

import {hostGroups} from "../../api/interaction";

export default {
  name: "sequence",
  components: {},
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.loadGroups();
  },
  methods: {
    itemClick(item, nodeType) {
      this.$router.push({path: '/interaction/nodeView', query: {
          host: item.host,
          nodeType: nodeType,
          pageType: 2,
        }})
    },
    async loadGroups() {
      const res = await hostGroups();
      res.data.map( n => {
        let log = ''
        try {
          log = require(`@/assets/image/interaction-virus-host/${n.host}.jpg`)
        } catch (e) {
          log = require(`@/assets/image/def.png`)
        }
        n.log = log
      })

      this.list = res.data
    },
  }
}
</script>

<style lang="stylus" scoped>

.main {
  width 1170px
  margin-top 20px
  padding-top 10px
  font-family: Times New Roman;

  .title {
    font-size 28px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 800
  }

  .subTitle {
    margin-top 20px
    font-size 18px
    color #0a2458

    .a {
      color #0a2458
      cursor pointer
      text-decoration underline
    }
    .a:hover {
    }
  }

  .rna-warp {
    display flex
    flex-wrap wrap
    padding 15px
    .item {
      flex: 0 0 25%;
      display flex
      flex-direction column
      align-items center
      margin-bottom 40px
      div {
        font-weight 600
        margin-bottom 10px
        font-family Times New Roman
      }
    }

    .desc {
      font-weight 500
      font-size 13px
      color rgba(122, 122, 122, 0.37)
    }

    .imgWarp {
      display flex
      div {
        text-align: center;
        //line-height: 170px;
      }
    }

    img {
      cursor pointer
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin-right 10px
    }
  }
}

</style>
